<!DOCTYPE HTML>

</html>

<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
	<link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css" />
	<link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" />
	<script type="text/javascript" src="../lib/laydate/laydate.js"></script>
	<style>
		.layui-progress-bar span{
		position: relative;
	    top: 20%;
	    right: 7px;
	    line-height: 18px;
	    font-size: 18px;
	    color: #FFF;
        
	}
    .layui-card {
        background: #01AAED;
    }
    .layui-card-header{
        border-bottom:0;
        }
</style>
	<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
	<title>添加管理员</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
</head>

<body bgcolor="#666">
	<div class="page-container">
		<!--平台注册数-->

		<!-- <div class="layui-row layui-col-space10" style="margin-bottom:20px">
			<div class="layui-col-md12" style="text-align: center;background-color: #01AAED;height: 100px;border-left-color: #888888;color: white;">
				<!-- <div style="line-height: 30px;padding-top:15px">
					<h1 style='font-size:25px;font-weight: 300;'>KVM后台系统</h1>
					<span style="margin-left: 4px;font-size:20px;"">平台总注册数:</span>
				<span style=" font-size:20px;" id="allaic">1</span>
				</div> -->

			<!-- </div> -->
		<!-- </div> -->
        <div class="layui-row layui-col-space15" style="text-align:center;background-color: #01AAED;height: 100px;margin-bottom: 10px;">
                <div class="layui-col-sm6 layui-col-md2 ">
                        <div class="layui-card">
                            <div class="layui-card-header " style="font-size:16px;">
                                    平台总注册数:
                            </div>
                            <div class="layui-card-body layuiadmin-card-list">
                                <p id="allaic" class="layuiadmin-big-font" style="font-size:18px;">0.0000</p>
                            </div>
                        </div>
                    </div>
			<div class="layui-col-sm6 layui-col-md2 ">
				<div class="layui-card">
					<div class="layui-card-header " style="font-size:16px;">
						今日订单量：
					</div>
					<div class="layui-card-body layuiadmin-card-list">
						<p id="OrderNum" class="layuiadmin-big-font" style="font-size:18px;">0.0000</p>
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md2 ">
				<div class="layui-card">
					<div class="layui-card-header" style="font-size:16px;">
						总订单量：
					</div>
					<div class="layui-card-body layuiadmin-card-list">
						<p id="sumOrder" class="layuiadmin-big-font" style="font-size:18px;">0.0000</p>
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md2 ">
				<div class="layui-card">
					<div class="layui-card-header" style="font-size:16px;">
						今日销售额：
					</div>
					<div class="layui-card-body layuiadmin-card-list">
						<p id="orderMoney" class="layuiadmin-big-font" style="font-size:18px;">0.0000</p>
					</div>
				</div>
			</div>
			<div class="layui-col-sm6 layui-col-md2 ">
				<div class="layui-card">
					<div class="layui-card-header" style="font-size:16px;">
						总销售额：
					</div>
					<div class="layui-card-body layuiadmin-card-list">
						<p id="orderTotalMoney" class="layuiadmin-big-font" style="font-size:18px;">0.0000</p>
					</div>
				</div>
			</div>

		</div>
<!-- 交易统计-->
<table class="table table-border table-bordered">
	<tbody>
		<tr>
			<td scope="col" colspan="14" style="text-align: center;position: relative;">
				<div class="form-label  col-sm-12">交易趋势统计图</div>
				<div class="row cl text-r" style="position:absolute;right:0;top:7px" >
					<div class="form-label  col-sm-3" style="text-align:left;display: inline-block;margin-right: 10px;"><!--统计方式：-->
						<select style="cursor: pointer;width: 100px;" onchange="loadLines()" id="order">
							<option value="10">订单交易完成</option>
							<option value="1">订单待审核</option>
							<option value="3">订单待支付</option>
							<option value="6">订单代发货</option>
							<option value="9">订单待收货</option>
						</select>
					</div>
					<div class="form-label  col-sm-3" style="text-align:left;display:  inline-block;"><!--统计方式：-->
						<select style="cursor: pointer;width: 90px;" onchange="loadLines()" id="giftPackage">
							<option value="0">普通订单</option>
							<option value="1">礼包订单</option>
							<option value="2">礼品订单</option>
							<option value="3">抢购订单</option>
							<option value="4">热销订单</option>
						</select>
					</div>
					<div class="form-label  col-sm-3" style="text-align:left;display:  inline-block; margin-right: 5px"><!--统计方式：-->
						<select style="cursor: pointer;width: 90px;" onchange="loadLines()" id="dateType">
							<option value="7">最近7天统计</option>
							<option value="30">最近30天统计</option>
							<option value="90">最近90天统计</option>
							<option value="365">最近365天统计</option>
						</select>
					</div>
					</div>
			</td>
		</tr>
		<tr class="text-c">
			<td width="100">
				<div id="dealLine" style="width: 100%;height:600px;"></div>
			</td>
		</tr>
	</tbody>
</table>
	</div>
	
	

	</div>
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="../lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="../lib/layui/layui.all.js"></script>
	<script type="text/javascript" src="../static/h-ui/js/H-ui.min.js"></script>
	<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js"></script>
	<!--/_footer 作为公共模版分离出去-->
	<link rel="stylesheet" type="text/css" href="../lib/pager/Pager.css" />
	<script type="text/javascript" src="../lib/pager/jquery.pager.js"></script>
	<script type="text/javascript" src="./../static/js/common.js"></script>
	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="../lib/jquery.validation/1.14.0/jquery.validate.js"></script>
	<script type="text/javascript" src="../lib/jquery.validation/1.14.0/validate-methods.js"></script>
	<script type="text/javascript" src="../lib/jquery.validation/1.14.0/messages_zh.js"></script>
	<script type="text/javascript" src="../lib/echarts/4.1.0/echarts.min.js"></script>
	<!--echars4.1.0-->
	<script type="text/javascript">
		$(function () {
			$.ajax({
				type: "post",
				xhrFields: { withCredentials: true },
				url: admin_url + '/statistical/homePageStatistical',
				data: { tokenUserId: userId, token: token},
				success: function (data) {
					if(data.code == 200 && data.data){
					$("#allaic").text(data.data.registerTotalNum);
					$("#OrderNum").text(data.data.curdateOrderTotalNum);
					$("#sumOrder").text(data.data.orderTotalNum);
					$("#orderMoney").text(data.data.curdateOrderTotalMoney.toFixed(2));
					$("#orderTotalMoney").text(data.data.orderTotalMoney.toFixed(2));	
					}
				}
			})
			loadLines();
		})

	//初始化统计图
	function loadLines(){
		var dtype=$("#dateType").val(),
		giftPackage = $("#giftPackage").val(),
		order = $("#order").val();
		//USD/金额 统计数据
		$.ajax({
			type: "post",
		    xhrFields:{withCredentials:true},
		    data: {token:token,tokenUserId:userId,days:dtype,status:order,type:giftPackage},
		    url: admin_url+"/statistical/dealTrendStatistical",
		    success: function (data) {
				// var data = eval('('+data+')');
			    if(data.code==200){
			    	var myChart = echarts.init(document.getElementById('dealLine'));
					var colors = ['#FF9900', '#00CCFF', '#FF00CC'];
					var option = {
					    color: colors,
					    tooltip: {
					        trigger: 'axis',
					        axisPointer: {
					            type: 'cross'
					        }
					    },
					    grid: {
					        right: '4%',
					        left:'11%'
					    },
					   	toolbox: { //可视化的工具箱
			                show: true,
			                feature: {
			                    dataView: { //数据视图
			                        show: true,
			                        optionToContent:function(opt) {
							var axisData = opt.xAxis[0].data;
							var series = opt.series;
							var table ='<table id="test" class="table table-border table-bordered table-bg table-hover table-sort" style="width:100%;text-align:center">',
							table = table + '<thead><tr>'+ '<th>统计时间节点</th>'+ '<th>' + series[0].name + '</th>' + '<th>' + series[1].name + '</th>'+ '</tr></thead>';
							table += '<tbody>';
							for (var i = 0, l = axisData.length; i < l; i++) {
								table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>' + '<td>' + series[1].data[i] + '</td></tr>';
							}
							table += '</tbody>';
							return table;
						}
                    },
                    restore: { //重置
                        show: true
                    },
                    dataZoom: { //数据缩放视图
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['bar', 'line']
                    }
                },
                right:'134'
            },
		    legend: {
		        data:['订单交易金额','订单数量'],
		        // position:'center'
		    },
		    xAxis: [
		        {
		            type: 'category',
		            axisLabel: {
	                	rotate:25
	            	},
		            axisTick: {
		                alignWithLabel: true
		            },
		            data: data.data.dealje.title,
		            boundaryGap: true,
		        }
		    ],
		    yAxis: [
	        {
	            type: 'value',
	            name: '订单交易金额',
	            min: 0,
	            position: 'left',
	            axisLine: {
	                lineStyle: {
	                    color: colors[0]
	                }
	            },
	            axisLabel: {
	                formatter: '{value} 元'
	            }
	        },
	        {
	            type: 'value',
	            name: '订单数量',
	            min: 0,
	            position: 'left',
	            offset: 80,
	            axisLine: {
	                lineStyle: {
	                    color: colors[1]
	                }
	            },
	            axisLabel: {
	                formatter: '{value} ',
	            }
	        }
			    ],
			    series: [
			        {
			            name:'订单交易金额',
			            type:'bar',
			            data:data.data.dealje.data,
			            smooth: true
			        },
			        {
			            name:'订单数量',
			            type:'bar',
			            yAxisIndex: 1,
			            data:data.data.ordersl.data,
			            smooth: true
			        }
			    ]
			};
        	myChart.setOption(option);
			    }
			}
		});	
		
	}
	</script>
</body>

</html>